<template>
  <div id="app">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
        >
        <template #action>
            <div @click="onSearch">搜索</div>
          </template>
          </van-search>

      </form>

      <van-field label="性别:" label-width="40" class="keyworde-ss" :border="false">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1" checked-color="#ff5b5a">男</van-radio>
            <van-radio name="2" checked-color="#ff5b5a">女</van-radio>
            <van-tag color="#FFFFFF" size="large" round  text-color="#999999">学历:&nbsp;&nbsp;</van-tag>
            <van-tag color="#f2f2f2" size="large" round  text-color="#999999" @click="showPickerXl = true">{{Xlvalue}}<van-icon name="arrow-down" /></van-tag>
          </van-radio-group>
        </template>
      </van-field>

      <van-popup v-model="showPickerXl" position="bottom">
        <van-picker  show-toolbar  :columns="columnsXl"   @confirm="Xl"  @cancel="showPickerXl = false"  />
      </van-popup>

      <van-field label="身高:" label-width="40" class="keyworde-ss" :border="false">
        <template #input>
            <van-tag color="#f2f2f2" size="large" round  text-color="#999999" @click="sgshowArea = true">{{sgvalues}}<van-icon name="arrow-down" /></van-tag>
            <van-tag color="#FFFFFF" size="large" round  text-color="#999999">年龄:&nbsp;&nbsp;</van-tag>
            <van-tag color="#f2f2f2" size="large" round  text-color="#999999" @click="zoshowArea = true">{{zovalue}}<van-icon name="arrow-down" /></van-tag>
        </template>
      </van-field>
      <!-- 身高 -->
      <van-popup v-model="sgshowArea" position="bottom">
        <van-picker show-toolbar title="标题" :columns="columnssg"  @confirm="sgok" @cancel="sgshowArea = false" />
      </van-popup>
      <!-- 年龄 -->
      <van-popup v-model="zoshowArea" position="bottom">
        <van-picker show-toolbar title="标题" :columns="columnsnl"  @confirm="nlok" @cancel="zoshowArea = false" />
      </van-popup>

      <van-field label="地址:" label-width="40" class="keyworde-ss" :border="false">
        <template #input>
            <van-tag color="#f2f2f2" size="large" round  text-color="#999999"  @click="xjdshowArea = true" >{{xjdvalue}}<van-icon name="arrow-down" /></van-tag>
        </template>
      </van-field>

      <van-popup v-model="xjdshowArea" position="bottom">
        <van-area :columns-num="2" :area-list="ajdareaList"  @confirm="xjdonConfirms"  @cancel="xjdshowArea = false"      />
      </van-popup>

      <van-field label="婚姻状况:" label-width="65" class="keyworde-ss" :border="false">
        <template #input>
          <van-radio-group v-model="hy" direction="horizontal">
            <van-radio name="1" checked-color="#ff5b5a">未婚</van-radio>
            <van-radio name="2" checked-color="#ff5b5a">离异</van-radio>
          </van-radio-group>
        </template>
      </van-field>




      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onJiazai" :immediate-check="immediate">
          <div v-for="(item, index) in list" :key="index" icon="location-o" class="div-postion"  @click="tiao(item.id)">
            <van-cell :border="false" size="large" @click="tiao(item.id)">
            <template #title>
              <span class="">{{item.ncnicknamenc}}</span>
              <van-tag type="danger" round color="#ff8080" size="medium">&nbsp;{{item.sextext}}&nbsp;&nbsp;{{item.birthday}}岁&nbsp;</van-tag>
            </template>
            <template #label>
              <span class="">{{item.xjdaddress}}</span>
            </template>
            <template #icon>
              <img :src="item.headimgurl" alt="" class="left-img">
            </template>
            </van-cell>
            <div style="background: #FFFFFF;">
              <div class="xl-sg-hyzk">学历：{{item.xlname}}&nbsp;&nbsp;身高：{{item.sgname}}cm&nbsp;&nbsp;</div>
              <div class="h-10"></div>
              <div class="xl-sg-hyzk">婚姻状况：{{item.hynametext}}</div>
              <div class="h-10"></div>
              <div class="h-15 bj-f7f7f7"></div>
            </div>
            <img v-lazy="item.picurl" class="vant-lazy" />
          </div>
      </van-list>





  </div>
</template>
<script>
  import areaList from "../../static/Areajs/area.js"
export default {
  data () {
    return {

      list: [],
      immediate:false,
      loading: false,
      finished: false,
      page: 1,//请求第几页
      total: 0,//总共的数据条数


      hy:'',
      value: '',
      radio:'',

      xjdvalue:"请选择",
      xjdshowArea: false,
      ajdareaList: areaList, // 数据格式见 Area 组件文档

      showPickerXl:false,
      Xlvalue:"请选择",
      columnsXl:['初中','高中','中专','大专','本科','研究生','硕士','博士'],

      zovalue:'请选择',
      zoshowArea:false,
      columnsnl: [
        // 第一列
        {
          values: ['18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90','91','92','93','94','95','96','97','98','99','100'],
          defaultIndex: 0,
        },
        // 第二列
        {
          values: ['18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40','41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60','61','62','63','64','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90','91','92','93','94','95','96','97','98','99','100'],
          defaultIndex: 0,
        },
      ],
      sgvalues:'请选择',
      sgshowArea:false,
      columnssg: [
        // 第一列
        {
          values: ['150', '151', '152', '153', '154', '155', '156', '157', '158', '159', '160', '161', '162', '163', '164', '165', '166', '167', '168', '169', '170', '171', '172', '173', '174', '175', '176', '177', '178', '179','180','181','182','183','184','185','186','187','188','189','190','191','192','193','194','195','196','197','198','199','200','201','202','203','204','205','206','207','208','209','210'],
          defaultIndex: 0,
        },
        // 第二列
        {
          values: ['150', '151', '152', '153', '154', '155', '156', '157', '158', '159', '160', '161', '162', '163', '164', '165', '166', '167', '168', '169', '170', '171', '172', '173', '174', '175', '176', '177', '178', '179','180','181','182','183','184','185','186','187','188','189','190','191','192','193','194','195','196','197','198','199','200','201','202','203','204','205','206','207','208','209','210'],
          defaultIndex: 0,
        },
      ],




    }
  },
  components: {
  },
  created:function () {
      this.$emit('footer', false);
  },

  mounted () {
    this.recordapi();
  },
  activated(){
      if(this.$route.meta.keepAlive){
          this.$emit('footer', true);
      }
  },
  	methods: {

      tiao(e){
        this.$router.push('Usercont?id='+e)
        console.log(e);
      },

      // 选择省市区  现居地
      xjdonConfirms(values) {
        this.xjdvalue = values
          .filter((item) => !!item)
          .map((item) => item.name)
          .join('/');
        this.xjdshowArea = false;
      },

      // 择偶要求 身高
      sgok(values) {
        this.sgvalues = values[0]+"~"+values[1]
        this.sgshowArea = false;
      },
      // 择偶要求 年龄
      nlok(values) {
        this.zovalue = values[0]+"~"+values[1]
        this.zoshowArea = false;
      },

      // 学历
      Xl(value) {
       this.Xlvalue = value;
       this.showPickerXl = false;
     },

      onSearch(val) {
        this.page = 1
        this.list  = [];
        this.recordapi()
         // this.$toast(hy);
      },

      recordapi(){
          var that = this;
          var userid = that.$cookieStore.getCookie('userid');
           that.$api.post("/Index/sslist",{'xjdaddress':that.xjdvalue,'xlname':that.Xlvalue,'csname':that.zovalue,'sgname':that.sgvalues,'sex':that.radio,'hyname':that.hy,'page':that.page}).then(res => {
            console.log(res);
            let rows = res.list.data; //请求返回当页的列表
            // // console.log(that.page);
            console.log(rows)
             that.loading  = false;
             that.pageSize = res.list.per_page;
             that.total    = res.list.total;
             if (rows == null || rows.length === 0) {
               // 加载结束
               that.finished = true;
               return;
             }
            // 将新数据与老数据进行合并
             that.list = that.list.concat(rows);
            // //如果列表数据条数>=总条数，不再触发滚动加载
            if(that.list.length >= that.total){
               that.finished = true;
            }
          });
      },

      // 加载
      onJiazai:function(){
        var that = this;
        that.page++;
        console.log(that.page)
        that.recordapi()
      },




    }
}
</script>
